<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./echarts.min.js"></script>
  <div id="main" style="width: 500px;height: 600px; background-color: #000;"></div>
  <script>
    const mychart = echarts.init(document.querySelector('#main'))
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            color: 'pink'
          },
          axisTick: {
            //坐标轴上的分隔杠
            interval: 'auto'
          },
          axisLine: {
            show: 'true',
            lineStyle: {
              color: 'skyblue',
              type: 'dashed'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLine: {
            //y轴线
            show: 'true',
            lineStyle: {
              color: 'pink',
              type: 'dashed'
            }
          },
          splitLine: {
            //分割线
            show: 'true',
            lineStyle: {
              // color:'red',
              type: 'dashed'
            }
          },
          axisLabel: {
            color: 'skyblue'
          }
        }
      ],
      color: [
        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'skyblue' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'white' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
        {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 2,
          colorStops: [
            {
              offset: 0,
              color: 'white' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'pink' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      ],
      series: [
        {
          // name: 'Desert',
          type: 'bar',
          // label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [120, 200, 150, 80, 70, 110, 130],
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(204, 247, 214,0.3)'
          }
        },
        {
          // name: 'Wetland',
          type: 'bar',
          // label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: [98, 77, 101, 99, 40, 45, 105],
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(204, 247, 214,0.3)'
          }
        }
      ]
    };
    mychart.setOption(option);
  </script>
</body>

</html>